<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="onBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">{{ isEditing ? '编辑任务' : '创建任务' }}</text>
      <view class="save-btn" @click="onSave">保存</view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 任务标题 -->
      <view class="form-section">
        <input 
          type="text" 
          v-model="task.title"
          placeholder="任务标题（必填）" 
          class="title-input"
          maxlength="100"
          confirm-type="next"
          @focus="hideKeyboard = false"
        />
      </view>

      <!-- 任务描述 -->
      <view class="form-section">
        <textarea 
          v-model="task.description"
          placeholder="任务描述（选填）" 
          class="description-input"
          maxlength="500"
          rows="4"
          @focus="hideKeyboard = false"
        ></textarea>
      </view>

      <!-- 任务状态 -->
      <view class="form-section" v-if="isEditing">
        <view class="form-label">任务状态</view>
        <view class="status-options">
          <view 
            v-for="status in statusOptions" 
            :key="status.value"
            class="status-option"
            :class="{ active: task.status === status.value }"
            @click="task.status = status.value"
          >
            {{ status.label }}
          </view>
        </view>
      </view>

      <!-- 优先级 -->
      <view class="form-section">
        <view class="form-label">优先级</view>
        <view class="priority-options">
          <view 
            v-for="priority in priorityOptions" 
            :key="priority.value"
            class="priority-option"
            :class="{ active: task.priority === priority.value }"
            @click="task.priority = priority.value"
          >
            <view class="priority-dot" :class="`dot-${priority.value}`"></view>
            <text>{{ priority.label }}</text>
          </view>
        </view>
      </view>

      <!-- 截止时间 -->
      <view class="form-section">
        <view class="form-label">截止时间</view>
        <view class="date-picker-wrapper" @click="showDatePicker('dueTime')">
          <text v-if="task.dueTime" class="date-text">{{ formatDateTime(task.dueTime) }}</text>
          <text v-else class="placeholder-text">选择截止时间</text>
          <text class="iconfont icon-calendar"></text>
        </view>
      </view>

      <!-- 提醒功能已移除，后端不支持 -->

      <!-- 分类和标签功能已移除，后端不支持 -->

      <!-- 重复任务功能已移除，后端不支持 -->

      <!-- 附件功能已移除，后端不支持 -->

      <!-- 底部空间 -->
      <view style="height: 100rpx;"></view>
    </scroll-view>

    <!-- 标签和分类弹窗已移除，后端不支持这些功能 -->

    <!-- 日期时间选择器 -->
    <view v-if="showDatePickerModal" class="date-picker-modal" @click="hideDatePicker">
      <view class="picker-content" @click.stop>
        <view class="picker-header">
          <text class="cancel" @click="hideDatePicker">取消</text>
          <text class="confirm" @click="confirmDate">确定</text>
        </view>
        
        <view class="date-time-picker">
          <picker-view 
            v-if="showTimePicker" 
            class="picker-view"
            :value="pickerValues"
            @change="onPickerChange"
          >
            <picker-view-column>
              <view v-for="year in years" :key="year">{{ year }}年</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="month in months" :key="month">{{ month }}月</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="day in days" :key="day">{{ day }}日</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="hour in hours" :key="hour">{{ hour }}时</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="minute in minutes" :key="minute">{{ minute }}分</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-mask">
      <view class="loading-spinner"></view>
      <text class="loading-text">保存中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import taskApi from '../../api/task';
import { showToast, confirm, showLoading, hideLoading } from '../../utils/uni';
// 导入uni-popup组件
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';

const router = useRouter();
const route = useRoute();

// 响应式数据
const task = ref({
  id: '',
  userId: '',
  title: '',
  description: '',
  type: '',
  startTime: null,
  endTime: null,
  status: 0,
  priority: 'medium',
  duration: 0,
  completionRate: 0,
  energyReward: 0
});

const isLoading = ref(false);
const hideKeyboard = ref(true);
const isEditing = ref(false);
const currentDateField = ref('');
const showDatePickerModal = ref(false);
const showTimePicker = ref(true);
const pickerValues = ref([0, 0, 0, 0, 0]);

// 选项数据
const statusOptions = [
  { label: '未开始', value: 0 },
  { label: '已完成', value: 1 }
];

const priorityOptions = [
  { label: '高', value: 'high' },
  { label: '中', value: 'medium' },
  { label: '低', value: 'low' }
];

// 移除重复任务选项，后端不支持

// 日期选择器相关计算属性
const years = computed(() => {
  const currentYear = new Date().getFullYear();
  const result = [];
  for (let i = 0; i < 10; i++) {
    result.push(currentYear + i);
  }
  return result;
});

const months = computed(() => {
  const result = [];
  for (let i = 1; i <= 12; i++) {
    result.push(i);
  }
  return result;
});

const days = computed(() => {
  const year = years.value[pickerValues.value[0]];
  const month = pickerValues.value[1] + 1; // 月份从0开始
  const daysInMonth = new Date(year, month, 0).getDate();
  const result = [];
  for (let i = 1; i <= daysInMonth; i++) {
    result.push(i);
  }
  return result;
});

const hours = computed(() => {
  const result = [];
  for (let i = 0; i < 24; i++) {
    result.push(i);
  }
  return result;
});

const minutes = computed(() => {
  const result = [];
  for (let i = 0; i < 60; i += 5) {
    result.push(i);
  }
  return result;
});

// 方法
const loadTaskData = async () => {
  const taskId = route.params.id;
  if (!taskId) {
    // 创建新任务
    isEditing.value = false;
    // 设置默认用户ID
    task.value.userId = uni.getStorageSync('userId') || '1';
    return;
  }
  
  isEditing.value = true;
  isLoading.value = true;
  
  try {
    // 获取用户所有任务并过滤
    const userId = uni.getStorageSync('userId') || '1';
    const res = await taskApi.getUserTasks(userId);
    const taskData = res.data.find(t => t.id === taskId);
    
    if (!taskData) {
      showToast('任务不存在', 'error');
      router.back();
      return;
    }
    
    task.value = {
      id: taskData.id || '',
      userId: taskData.userId || '',
      title: taskData.title || '',
      description: taskData.description || '',
      type: taskData.type || '',
      startTime: taskData.startTime || null,
      endTime: taskData.endTime || null,
      status: taskData.status || 0,
      priority: taskData.priority || 'medium',
      duration: taskData.duration || 0,
      completionRate: taskData.completionRate || 0,
      energyReward: taskData.energyReward || 0
    };
  } catch (error) {
    showToast('加载任务数据失败', 'error');
    console.error('Failed to load task data:', error);
    router.back();
  } finally {
    isLoading.value = false;
  }
};

// 移除分类加载函数，后端不支持分类

const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

const showDatePicker = (field) => {
  currentDateField.value = field;
  showDatePickerModal.value = true;
  
  // 初始化日期选择器的值
  const currentValue = task.value[field];
  const date = currentValue ? new Date(currentValue) : new Date();
  
  const year = date.getFullYear();
  const yearIndex = years.value.findIndex(y => y === year);
  
  pickerValues.value = [
    yearIndex >= 0 ? yearIndex : 0,
    date.getMonth(), // 月份从0开始
    date.getDate() - 1, // 日期从0开始
    date.getHours(),
    Math.floor(date.getMinutes() / 5) // 5分钟间隔
  ];
};

const hideDatePicker = () => {
  showDatePickerModal.value = false;
};

const onPickerChange = (e) => {
  pickerValues.value = e.detail.value;
};

const confirmDate = () => {
  const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = pickerValues.value;
  
  const year = years.value[yearIndex];
  const month = monthIndex;
  const day = dayIndex + 1;
  const hour = hours.value[hourIndex];
  const minute = minutes.value[minuteIndex];
  
  const date = new Date(year, month, day, hour, minute);
  task.value[currentDateField.value] = date.toISOString();
  
  hideDatePicker();
};

const showCategoryModal = () => {
  loadCategories(); // 每次打开都重新加载分类
  categoryPopup.value?.open();
};

const closeCategoryModal = () => {
  categoryPopup.value?.close();
};

const selectCategory = (category) => {
  selectedCategory.value = category;
  task.value.categoryId = category ? category.id : '';
  closeCategoryModal();
};

const navigateToCategoryManage = () => {
  closeCategoryModal();
  router.push('/pages/task/categoryManage');
};

const showTagModal = () => {
  newTag.value = '';
  tagPopup.value?.open();
};

const closeTagModal = () => {
  tagPopup.value?.close();
};

const toggleCommonTag = (tag) => {
  const index = task.value.tags.indexOf(tag);
  if (index > -1) {
    task.value.tags.splice(index, 1);
  } else {
    if (task.value.tags.length < 10) { // 限制最多10个标签
      task.value.tags.push(tag);
    } else {
      showToast('最多添加10个标签', 'info');
    }
  }
};

const addNewTag = () => {
  const tag = newTag.value.trim();
  if (!tag) return;
  
  if (task.value.tags.includes(tag)) {
    showToast('标签已存在', 'info');
    return;
  }
  
  if (task.value.tags.length >= 10) {
    showToast('最多添加10个标签', 'info');
    return;
  }
  
  task.value.tags.push(tag);
  closeTagModal();
};

const removeTag = (index) => {
  task.value.tags.splice(index, 1);
};

const chooseAttachment = () => {
  uni.chooseMessageFile({
    count: 9 - task.value.attachments.length,
    type: 'file',
    extension: ['jpg', 'jpeg', 'png', 'gif', 'doc', 'docx', 'pdf', 'txt', 'xls', 'xlsx', 'ppt', 'pptx'],
    success: (res) => {
      uploadAttachments(res.tempFiles);
    },
    fail: (err) => {
      console.error('Failed to choose file:', err);
    }
  });
};

const uploadAttachments = async (files) => {
  for (const file of files) {
    uploadingAttachment.value = true;
    uploadProgress.value = 0;
    
    try {
      // 模拟上传进度
      const uploadInterval = setInterval(() => {
        if (uploadProgress.value < 100) {
          uploadProgress.value += 10;
        } else {
          clearInterval(uploadInterval);
        }
      }, 300);
      
      // 这里应该调用上传API，现在使用模拟数据
      // const res = await taskApi.uploadAttachment(file);
      
      // 模拟上传延迟
      await new Promise(resolve => setTimeout(resolve, 3000));
      
      clearInterval(uploadInterval);
      uploadProgress.value = 100;
      
      // 添加到附件列表
      const fileType = getFileType(file.name);
      task.value.attachments.push({
        id: `temp-${Date.now()}`,
        name: file.name,
        size: file.size,
        type: fileType,
        url: file.path // 实际项目中这里应该是服务器返回的URL
      });
      
      // 重置上传状态
      setTimeout(() => {
        uploadingAttachment.value = false;
        uploadProgress.value = 0;
      }, 500);
      
    } catch (error) {
      showToast('上传失败', 'error');
      console.error('Failed to upload file:', error);
      uploadingAttachment.value = false;
      uploadProgress.value = 0;
    }
  }
};

const getFileType = (fileName) => {
  const extension = fileName.split('.').pop().toLowerCase();
  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
  const audioExts = ['mp3', 'wav', 'ogg', 'flac'];
  const videoExts = ['mp4', 'avi', 'mov', 'wmv'];
  const documentExts = ['doc', 'docx', 'txt', 'rtf'];
  const spreadsheetExts = ['xls', 'xlsx', 'csv'];
  const presentationExts = ['ppt', 'pptx'];
  
  if (imageExts.includes(extension)) return 'image';
  if (audioExts.includes(extension)) return 'audio';
  if (videoExts.includes(extension)) return 'video';
  if (documentExts.includes(extension)) return 'document';
  if (spreadsheetExts.includes(extension)) return 'spreadsheet';
  if (presentationExts.includes(extension)) return 'presentation';
  if (extension === 'pdf') return 'pdf';
  return 'file';
};

const getFileIcon = (fileType) => {
  const iconMap = {
    'image': 'icon-image',
    'audio': 'icon-audio',
    'video': 'icon-video',
    'document': 'icon-document',
    'spreadsheet': 'icon-spreadsheet',
    'presentation': 'icon-presentation',
    'pdf': 'icon-pdf'
  };
  return iconMap[fileType] || 'icon-file';
};

const previewAttachment = (attachment, index) => {
  // 处理附件预览逻辑
  if (attachment.type === 'image') {
    // 图片预览
    const imageUrls = task.value.attachments
      .filter(a => a.type === 'image')
      .map(a => a.url);
    const currentImageIndex = imageUrls.indexOf(attachment.url);
    
    if (currentImageIndex >= 0) {
      uni.previewImage({
        urls: imageUrls,
        current: currentImageIndex
      });
    }
  } else {
    // 其他类型文件提示用户
    showToast('暂不支持预览此类型文件', 'info');
  }
};

const removeAttachment = (index) => {
  task.value.attachments.splice(index, 1);
};

const validateTask = () => {
  if (!task.value.title.trim()) {
    showToast('请输入任务标题', 'warn');
    return false;
  }
  
  // 检查截止时间和提醒时间的逻辑
  if (task.value.dueTime && task.value.remindTime) {
    if (new Date(task.value.remindTime) > new Date(task.value.dueTime)) {
      showToast('提醒时间不能晚于截止时间', 'warn');
      return false;
    }
  }
  
  return true;
};

const onSave = async () => {
  if (!task.value.title.trim()) {
    showToast('请输入任务标题', 'warning');
    return;
  }
  
  // 隐藏键盘
  uni.hideKeyboard();
  
  isLoading.value = true;
  
  try {
    // 准备任务数据，适配后端创建任务API
    const taskData = {
      userId: task.value.userId,
      title: task.value.title.trim(),
      description: task.value.description.trim(),
      type: task.value.type || 'normal',
      startTime: task.value.startTime,
      endTime: task.value.endTime,
      status: task.value.status,
      priority: task.value.priority,
      duration: task.value.duration,
      completionRate: task.value.completionRate,
      energyReward: task.value.energyReward
    };
    
    // 调用创建任务接口（后端没有单独的更新接口）
    await taskApi.createTask(taskData);
    showToast('任务创建成功');
    
    // 延迟跳转，让用户看到提示
    setTimeout(() => {
      router.back();
    }, 1500);
  } catch (error) {
    showToast('创建任务失败', 'error');
    console.error('Failed to save task:', error);
  } finally {
    isLoading.value = false;
  }
};

const onBack = () => {
  // 检查是否有未保存的更改
  if (task.value.title.trim() || task.value.description.trim() || task.value.tags.length > 0 || task.value.attachments.length > 0) {
    confirm('有未保存的更改，确定要离开吗？').then(confirmed => {
      if (confirmed) {
        router.back();
      }
    });
  } else {
    router.back();
  }
};

// 监听路由参数变化
watch(() => route.params.id, () => {
  loadTaskData();
});

// 生命周期
onMounted(() => {
  loadTaskData();
  loadCategories();
});
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn .iconfont {
  font-size: 36rpx;
  color: #333;
}

.navbar .title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.save-btn {
  font-size: 32rpx;
  color: #4a90e2;
  font-weight: bold;
  padding: 0 20rpx;
}

.content {
  padding-bottom: 100rpx;
}

.form-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.title-input {
  font-size: 36rpx;
  color: #333;
  width: 100%;
  padding: 10rpx 0;
}

.description-input {
  font-size: 32rpx;
  color: #333;
  width: 100%;
  padding: 10rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  box-sizing: border-box;
  min-height: 200rpx;
}

.status-options {
  display: flex;
  gap: 20rpx;
}

.status-option {
  padding: 12rpx 32rpx;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  font-size: 28rpx;
  color: #666;
}

.status-option.active {
  background-color: #4a90e2;
  color: #fff;
}

.priority-options {
  display: flex;
  gap: 20rpx;
}

.priority-option {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  font-size: 28rpx;
  color: #666;
}

.priority-option.active {
  background-color: #e3f2fd;
}

.priority-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.dot-high {
  background-color: #ff6b6b;
}

.dot-medium {
  background-color: #fbc02d;
}

.dot-low {
  background-color: #4caf50;
}

.date-picker-wrapper,
.category-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.date-text,
.placeholder-text,
.category-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.placeholder-text {
  color: #999;
}

.date-picker-wrapper .iconfont,
.category-selector .iconfont {
  font-size: 32rpx;
  color: #999;
}

.selected-category {
  display: flex;
  align-items: center;
  flex: 1;
}

.category-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.category-color.empty {
  background-color: #ddd;
  border: 2rpx dashed #999;
}

.add-tag-btn,
.add-attachment-btn {
  font-size: 28rpx;
  color: #4a90e2;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  padding: 8rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 60rpx;
  font-size: 26rpx;
  color: #666;
}

.tag-text {
  margin-right: 10rpx;
}

.tag-item .icon-close {
  font-size: 24rpx;
  color: #999;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.toggle {
  width: 80rpx;
  height: 44rpx;
  background-color: #e0e0e0;
  border-radius: 44rpx;
  position: relative;
  transition: background-color 0.3s;
}

.toggle.active {
  background-color: #4a90e2;
}

.toggle-circle {
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  background-color: #fff;
  border-radius: 50%;
  top: 4rpx;
  left: 4rpx;
  transition: transform 0.3s;
}

.toggle-circle.active {
  transform: translateX(36rpx);
}

.recurring-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 20rpx;
}

.recurring-option {
  padding: 12rpx 24rpx;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  font-size: 28rpx;
  color: #666;
}

.recurring-option.active {
  background-color: #4a90e2;
  color: #fff;
}

.attachments-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.attachment-item {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140rpx;
  position: relative;
}

.attachment-item .iconfont {
  font-size: 60rpx;
  color: #4a90e2;
  margin-bottom: 10rpx;
}

.attachment-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.attachment-item .icon-close {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  font-size: 24rpx;
  color: #999;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-progress {
  margin-top: 20rpx;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background-color: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.progress-fill {
  height: 100%;
  background-color: #4a90e2;
  border-radius: 6rpx;
  transition: width 0.3s;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.popup-content {
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
}

.popup-body {
  padding: 30rpx;
}

.common-tags {
  margin-bottom: 30rpx;
}

.common-tags-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.common-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.common-tag {
  padding: 10rpx 24rpx;
  background-color: #f0f0f0;
  border-radius: 60rpx;
  font-size: 26rpx;
  color: #666;
}

.common-tag.active {
  background-color: #4a90e2;
  color: #fff;
}

.tag-input {
  width: 100%;
  padding: 20rpx;
  font-size: 32rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 16rpx;
  box-sizing: border-box;
}

.popup-actions {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
}

.popup-actions button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  border-radius: 40rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #4a90e2;
  color: #fff;
}

.confirm-btn:disabled {
  background-color: #ccc;
  color: #fff;
}

.categories-list {
  max-height: 500rpx;
  overflow-y: auto;
}

.category-option {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.category-option:last-child {
  border-bottom: none;
}

.category-option.active {
  background-color: #f0f8ff;
}

.category-option.add-category {
  color: #4a90e2;
  justify-content: center;
}

.category-option.add-category .iconfont {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.date-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 999;
}

.picker-content {
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.picker-header .cancel,
.picker-header .confirm {
  font-size: 32rpx;
  font-weight: bold;
}

.picker-header .cancel {
  color: #999;
}

.picker-header .confirm {
  color: #4a90e2;
}

.picker-view {
  height: 500rpx;
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 8rpx solid #f3f3f3;
  border-top: 8rpx solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #fff;
  font-size: 32rpx;
}
</style>